<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData">
      <template #leftBar>
        <tiny-date-picker v-model="data.search.searchDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
        <tiny-button type="primary" @click="queryData">查询</tiny-button>
      </template>
      <template v-slot:loginStuts="{scopeData}">
        <el-button v-if="scopeData.row.status == 1" text type="success" link>登录成功</el-button>
        <el-button v-else text type="danger" link>登录失败</el-button>
      </template>
    </vo-table>
  </div>
</template>

<script setup>
  import {reactive, ref, toRef, getCurrentInstance, onBeforeMount} from 'vue';
  let {proxy} = getCurrentInstance();
  const data = reactive({
    search: {},
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
  });
  data.tableData.cols = [
    {title: '登录账户', key: 'operateAccount', align: 'left', tooltip: true},
    {title: '登录设备', key: 'loginType', align: 'left', tooltip: true},
    {title: '登录IP', key: 'operateIp', align: 'left', tooltip: true},
    {title: '登录位置', key: 'ipAddress', align: 'left', tooltip: true},
    {title: '登录信息', key: 'msg', align: 'left', tooltip: true},
    {
      title: '登录状态',
      key: 'status',
      align: 'center',
      slot: 'loginStuts',
      tooltip: true,
    },
    {title: '登录日期时间', key: 'operateTime', align: 'left', tooltip: true},
  ];
  const queryData = async () => {
    debugger;
    let param = {
      beginDate: data.search.searchDate[0],
      endDate: data.search.searchDate[1],
    };
    data.tableData.data = await proxy.$api.system.queryLoginLog(param);
  };
</script>

<style lang="scss" scoped></style>
